<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height  //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0  //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0  //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
    -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/booking/css/layout.css">
    <link rel="stylesheet" href="/booking/css/bootstrap.min.css">
    <title>快速预约</title>
    <style type="text/css">
    @if($system->bgpic)
        .content{
            background:url("{{$system->bgpic}}") no-repeat;          background-size: cover;}
    @else
    .content{
            background:url("../images/bg.png") no-repeat;          background-size: cover;}
    @endif        
    </style>
</head>
<body>
<div class="content">
    <div class="form-box">
       @if(session('rs'))
        <div class="alert alert-{{session('rs')['status']}}">
          {{ session('rs')['msg'] }}
        </div>
        @endif
       
        <h5 class="form-title">快速预约</h5>
        <form action="{{url('booking/save')}}" method="post">
            @foreach($fields as $f)
            <div class="input-box">
                <input type="{{$f->type}}" 
                class="inset-input" 
                placeholder="请输入{{$f->remark}}" 
                name="fields[{{$f->id}}]"
                @if($f->required) 
                required="" 
                @endif
                value="{{old('field_'.$f->id)}}">
            </div>
            @endforeach
           
            <div class="input-box verification-box">
                <input type="text" class="inset-input " placeholder="请输入11位手机号码" required="" name="mobile" value="{{old('mobile')}}">
                @if($system->is_sms)
                <button type="button" class="btn btn-verification-border" id="getcode">获取验证码</button>
                @endif
            </div>
            @if($system->is_sms)
            <div class="input-box verification-box">
                <input type="text" class="inset-input " placeholder="请输入验证码" name="validatecode">
                
            </div>
            @endif
            <button type="submit" class="sub-btn">立即预约</button>
            {{csrf_field()}}
        </form>
        <div class="tip-box"><span class="text-red">*</span>请先<a class="text-red" data-toggle="modal" data-target="#myModal" >关注公众号</a>，否则无法收取预约成功信息
            <a href="" class="to-details">活动详情&gt;&gt;</a>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">识别二维码 关注公众号</h4>
            </div>
            <div class="modal-body">
                <div style="text-align: center">
                    <img src="/ercode.jpg" width="280" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">预约成功</h4>
            </div>
            <div class="modal-body">{{ session('rs')['msg'] }}</div>
            
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--jquery-2.2.3.min.js-->
<script src="/booking/js/jquery-2.2.3.min.js"></script>
<script src="/booking/js/bootstrap.min.js"></script>
<script>
    //页面高度控制
    $(window).bind('load resize', function () {
        $(".content").height(window.screen.height);
    });

    @if(session('rs')['status'] == 'success')
        $('#msgModal').modal('show');
    @endif

    var countdown = 60;
    $('#getcode').on('click',function(){
        var _this = $(this);
        var url = "{{url('booking/send-sms')}}";
        var data = {};
        data.mobile = $('input[name="mobile"]').val();
        if(checkPhone(data.mobile)==false) {
            alert('手机号码格式错误');
            return false;
        }
        $.get(url,data,function(rs){
            console.info(rs);
            setTime(_this);
        });
    })
    
    
    function setTime(obj) {
        if (countdown == 0) {
            obj.prop('disabled', false);
            obj.text("获取验证码");
            countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            obj.prop('disabled', true);
            obj.text("再次获取("+countdown+"s)") ;
            countdown--;
        }
        setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次

       
    }

    function checkPhone(phone){ 
       
        if(!(/^1[3456789]\d{9}$/.test(phone))){ 
           
            return false; 
        } 


    }
</script>
</body>
</html>

